<!-- BaiDuWebVideo.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>百度云视频播放器</title>
	<style type="text/css">
		html,body{
			padding: 0;
			margin: 0;
			background-color: rgba(0,0,0,1);
		}
		.left_item{
			width: 44px;
			height: 44px;	
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0);
			z-index: 99;
		}
		.back_icon{
			position: absolute;
			height: 18px;
			top: 6px;
			left: 8px;
		}
		.back_bg{
			background-color: rgba(0,0,0,0.5);
			border-radius: 15px;
			width: 30px;
			height: 30px;
			position: absolute;
			top: 7px;
			left: 7px;
		}
		.player_div{
			background-color: black;
		}
		.close_a{
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			height: 30px;
			background-color: rgba(0,0,0,0.3);
			z-index: 99;
		}
		.close_img{
			margin-top: 5px;
			margin-left: 5px;
			width: 20px;
		}
		.full-screen{
			transform:rotate(90deg);
			-ms-transform:rotate(90deg); /* Internet Explorer */
			-moz-transform:rotate(90deg); /* Firefox */
			-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
			-o-transform:rotate(90deg); /* Opera */
		}
		.small-screen{
			transform:rotate(0deg);
			-ms-transform:rotate(0deg); /* Internet Explorer */
			-moz-transform:rotate(0deg); /* Firefox */
			-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
			-o-transform:rotate(0deg); /* Opera */
		}
		.jw-controls{
			z-index: 2;
		}
		.jw-media{
			z-index: 1;
		}
		/*.jw-icon-fullscreen:before{
			content: "\E613";
		}
		.jw-icon-fullscreen.jw-off:before {
		    content: "\E608";
		}*/
	</style>
</head>
<body>
	<div id="content_div">
		<div class="player_div prism-player" id="J_prismPlayer"></div>
		<a class="left_item" href="#" onclick="backClick()"> 
			<span class="back_bg">
				<img class="back_icon" src="../../image/icon_jiantou.png" alt="">
			</span>
		</a>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/cyberplayer.js"></script>
<script type="text/javascript" src="../../script/videojs/video.min.js"></script>
<!--<script type="text/javascript" src="../../script/videojs/videojs-contrib-hls.min.js"></script>-->
<!--<script type="text/javascript" src="../../script/videojs/videojs-contrib-quality-levels.min.js"></script>-->
<script type="text/javascript">
	var isFullScreen = true;//默认大屏
	var currentPlayer;
	apiready = function(){
		hideStatusBar();
		setupNotifi(); 
		setupBaiDuVideo();
	}
	function hideStatusBar(){
		api.setFullScreen({
		    fullScreen: true
		});
	}
	function showStatusBar(){
		api.setFullScreen({
		    fullScreen: false
		});
	}
	function setupBaiDuVideo(){
		var width = $(window).height();
		var height = $(window).width();
		if (api.systemType == 'ios') {
			$('#content_div').addClass('full-screen');
    		$('#content_div').removeClass('small-screen');
		}
		var player = cyberplayer("J_prismPlayer").setup({
		    width: width,
		    height: height,
		    file: api.pageParam.url, // hls及ts地址必须支持跨域，且使用Token加密策略进行过转码。
		    autostart: true,
		    stretching: "uniform",
		    volume: 100,
		    controls: true,
		    ak: "c8e778c82a484e6ba2ffb86668835825", // 公有云平台注册即可获得accessKey
		    primary: "videojs", // 要使移动端有效，此参数必设！！
		    tokenEncrypt: "true", // 说明使用token加密
		    controls: 'over',
			starttime:0,
		    controlbar: {
		    	barLogo: false//隐藏logo
		    }
		});
		currentPlayer = player;
		var token = api.pageParam.token;
		if (token != undefined && token != 'undefined' && token != null && token != '') {
			player.on("beforePlay", function (e) {
			    // 这里模拟从后端获得token的操作，实际的token应该是后端来获取并传给前端的
			    player.setToken(e.file, token);
			});
		}
		player.on('ready', function () {
			console.log("准备就绪");
			// player.play();
			$("video").attr("poster","../../image/black.png");
		});
	    player.on('fullscreen', function(){
	    	if (isFullScreen) {//全屏时
	    		isFullScreen = false;
	    		if (api.systemType == 'ios') {
	    			player.resize($(window).width(), $(window).height());
		    		$('#content_div').removeClass('full-screen');
		    		$('#content_div').addClass('small-screen');
	    		}else{
	    			api.setScreenOrientation({orientation:"portrait_up"});
	    		}
	    	}else{//小屏时
	    		isFullScreen = true;
	    		if (api.systemType == 'ios') {
	    			player.resize($(window).height(), $(window).width());
		    		$('#content_div').addClass('full-screen');
		    		$('#content_div').removeClass('small-screen');
	    		}else{
	    			api.setScreenOrientation({orientation:"landscape_left"});
	    		}
	    	}
	    });
	    player.on('resize', function(){
	    	
	    });
	    player.on('controls', function () {
	    	var controls = player.getControls();
	    	// console.log('状态栏状态:'+controls);
		});
		//安卓下默认横屏
		if (api.systemType != 'ios') {
			api.setScreenOrientation({orientation:"landscape_left"});
		}
	}
	function setupNotifi(){
		api.addEventListener({
		    name: 'keyback'
		}, function(ret, err) {
		    backClick();
		});
	}

	function backClick(){
		showStatusBar();
		api.setScreenOrientation({orientation:"portrait_up"});
		api.sendEvent({
		    name: 'baiduWebVideoBackNotifi',
		    extra: api.pageParam
		});
		setupPlayFinish();
		api.closeWin();
	}
	function setupPlayFinish(){
		var position = currentPlayer.getPosition();
		var duration = currentPlayer.getDuration();
		if (position == duration) {
			api.sendEvent({
			    name: 'videoPlayFinishNotifi',
			    extra: api.pageParam
			});
		}
	}
</script>
</html>